page-team-performance-inhouse{
    $themeColor:#35ac63;
    @function pxTovw($px){
        @return $px/1080*100vw;
    }
    font-size: 0;
    .container{
        margin: 0 auto;
        width: pxTovw(960);
    }
    .scroll-content{
        padding-top: pxTovw(60);
        background-color: #f5f5f5;
    }
    ion-header{
        .header{
            .region{
                box-sizing: border-box;
                padding: pxTovw(35) pxTovw(60);
                height: pxTovw(150);
                border-bottom: pxTovw(1) solid #e9e9e9;
                .wrapper{
                    position: relative;
                    display: inline-block;
                    height: pxTovw(80);
                    line-height: pxTovw(80);
                    border:1px solid #e9e9e9;
                    border-radius: pxTovw(12);
                    font-size: pxTovw(42);
                    overflow: hidden;
                    .icon_down{
                        position: absolute;
                        top: pxTovw(28);
                        right: pxTovw(30);
                        display: inline-block;
                        width: pxTovw(24);
                        height: pxTovw(24);
                        background: url("../assets/images/myTeam/icon_down.png") 0 0 no-repeat;
                        background-size: cover;
                    }
                    ion-multi-picker{
                        margin-top: pxTovw(18);
                        text-align: center;
                        padding: 0 pxTovw(84) 0 pxTovw(30);
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .dateType{
                box-sizing: border-box;
                padding-top: pxTovw(35);
                height: pxTovw(150);
                border-bottom: pxTovw(1) solid #e9e9e9;
                .container{
                    display: flex;
                    justify-content: space-between;
                    div{
                        text-align: center;
                        width: pxTovw(200);
                        height: pxTovw(80);
                        line-height: pxTovw(80);
                        font-size: pxTovw(42);
                        color: #333;
                        border: 1px solid #e9e9e9;
                        border-radius: pxTovw(12);
                        &.active{
                            color: #fff;
                            background-color: $themeColor;
                            border: none;
                        }
                    }
                }
            }
            .datetime-ios{
                padding: 0;
            }
            .datetime-text{
                line-height: pxTovw(90);
                text-align: center;
            }
            .dataFilter{
                box-shadow: 0 pxTovw(10)  pxTovw(10) rgba(0, 0, 0, .1);
                .container{
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    padding-top: pxTovw(35);
                    height: pxTovw(150);
                    ion-datetime{
                        position: relative;
                        width: pxTovw(297);
                        height: pxTovw(80);
                        font-size: pxTovw(42);
                        color: #999;
                        border: 1px solid #e9e9e9;
                        border-radius: pxTovw(12);
                    }
                    .search{
                        text-align: center;
                        width: pxTovw(153);
                        height: pxTovw(80);
                        line-height: pxTovw(80);
                        font-size: pxTovw(42);
                        color: #fff;
                        border-radius: pxTovw(12);
                        background-color: $themeColor;
                    }
                }
            }
        }
    }
    ion-content{
        .listDetail{
            margin: 0 auto pxTovw(45);
            width: pxTovw(980);
            border-radius: pxTovw(15);
            background-color: #fff;
            ul{
                padding: pxTovw(45);
                li{
                    display: flex;
                    justify-content: space-between;
                    span{
                        font-size: pxTovw(42);
                        color: #333;
                        line-height: 1.8em;
                    }
                }
            }
        }
    }
}
ion-picker-cmp[inhouse]{
    @function pxTovw($px){
        @return $px/1080*100vw;
    }
    .picker-wrapper{
        .picker-toolbar-multi-picker-cancel{
            text-align: start;
        }
    }
    .picker-col:nth-of-type(2) {
        min-width: 25vw;
        transform: translate3d(pxTovw(80),0,0);
    }
    .picker-col:nth-of-type(3) {
        min-width: 25vw;
        transform: translate3d(pxTovw(40),0,0);
    }
    .picker-col:nth-of-type(4) {
        min-width: 50vw;
        transform: translate3d(pxTovw(-50),0,0);
    }
}

